import {defineComponent, onMounted, ref} from 'vue';
import { useRouter } from 'vue-router';
import './xxAddressInput.scss';
import BreadCrumb from "@/components/BreadCrumb";
import {ElInput, ElMessageBox} from "element-plus";
import {UserInfo} from "@/components/UserInfo";

export default defineComponent({
    setup() {
        const router = useRouter();
        const address = ref('');
        // 明确指定 ref 的类型为 ElInput 组件的实例类型
        const addressInputRef = ref<InstanceType<typeof ElInput> | null>(null);
        const focusInput = () => {
            if (addressInputRef.value) {
                addressInputRef.value.focus();
            }
        };
        const handleConfirm = () => {
            // 判断输入地址是否为空
            if (!address.value.trim()) {
                // ElMessageBox({
                //     title: '提示！',
                //     message: () => <span style={{fontSize: '188%'}}>请输入详细地址！</span>,
                //     confirmButtonText: '确认',
                //
                // })
                return;
            }
            // 这里可以将 address 的值传递给其他页面，比如通过路由参数
            router.push({
                path: '/PhoneInput',
                query: { address: address.value },
            });
        };
        // 场景1：页面加载完成后自动聚焦（适合移动端引导输入）
        onMounted(() => {
            // 延迟一点执行，确保组件已完全渲染
            setTimeout(focusInput, 100);
        });
        return () => (<>
                <UserInfo></UserInfo>
                {/* 场景2：点击输入框外部区域也能触发聚焦（可选）onClick={focusInput} */}
            <div class="address-input-container" onClick={focusInput}>
                <div class="title">
                    <div>
                        <BreadCrumb/>
                    </div>
                </div>
                    <div style={{ display:'flex',justifyContent:'center',}}>
                        <ElInput
                            ref={addressInputRef}
                            v-model={address.value}
                            style={{marginTop:'5%'}}
                            rows={4}// 设置显示多少行内容
                            type="textarea"
                            placeholder="请输入详细地址，点击此处输入"
                            class="address-input"
                            // auto-focus  // 可选：页面加载时自动聚焦并弹出键盘
                        />
                    </div>
                    <div style={{ height:"10%",display:'flex',flex:'1',justifyContent:'center',}}>
                        <button style={{height:"60%",marginTop:'1%'}} onClick={handleConfirm} class="confirm-btn">
                            确认
                        </button>
                    </div>
            </div>
            </>
        );
    },
});
